<template>
	<van-sticky>
		<van-nav-bar title="发布" left-arrow @click-left="onClickLeft" />
	</van-sticky>
	<div class="contain">
		<br />
		<van-form @submit="onSubmit">
			<van-cell-group inset>
			  <van-field v-model="title" name="title" placeholder="请输入标题" />
			  <picker/>
			  <van-field
				v-model="content"
				name="content"
				rows="10"
				type="textarea"
				maxlength="1000"
				placeholder="请输入文本内容"
				show-word-limit
			  />
			</van-cell-group>
			<div class="upload">
				<van-field  name="imgList">
					<template #input>
						<van-uploader 
						  :after-read="afterRead" 
						  v-model="fileList" 
						  name="fileList"
						  multiple
						  upload-icon="plus"
						  :max-size="1920 * 1080"
						  @oversize="onOversize"
						  />
					</template>
				</van-field>
			</div>
			<div class="btn">
				<van-button round block color="#FFB5C5" native-type="submit" >提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { createTopic } from "@/api/common.ts";
	import { Toast } from 'vant';
	import 'vant/es/toast/style';
	import router from '@/router';
	
	const onClickLeft = () => history.back();
	
	const title = ref('');
	const content = ref('');
	const fileList = ref([]);
	
	const afterRead = (file) => {
	      // 此时可以自行将文件上传至服务器
	    };
		
	const onOversize = (file) => {
	      Toast('文件大小不能超过2M');
		  }
	
	function onSubmit(data){
		console.log('submit')
		createTopic(data)
			.then(res => {
				if ( res.code == 0 ) {
					Toast('发布成功，快去看看吧！')
					router.push({
						name: "home",
					})
				} else {
					Toast(res.message)
				}
			})
	}

</script>

<style scoped>
	* {
		font-size: 16px;
	}
	
	.contain {
		height: 100%;
		background-color: #F0F8FF;
	}
	
	.btn{
		display: block;
		width: 80%;
		margin:  auto;
	}
</style>

<style>
	html,body,#app {
		height: 100%;
	}
	
	:root {
		--van-nav-bar-background-color: #FFB5C5;
		--van-nav-bar-height: 72px;
		--van-nav-bar-title-text-color: white;
		--van-nav-bar-title-font-size: 20px;
		--van-nav-bar-arrow-size: 20px;
		--van-field-label-width: 32px;
		--van-field-word-limit-color: gray;
		--van-field-word-limit-font-size: 16px;
	}
	
	.van-icon-arrow-left {
		color: var(--nav-bar-icon-color, #FFF) !important;
	}
	
	.upload{
		display: flex;
		margin: 3.35%;
		background: transparent;
	}
</style>